<template>
  <div class="total-sales">
    <common-card title="今日用户交易数" value="81,041">
      <template>
        <diV
          id="today-users-chart"
          :style="{ width: '100%', height: '100%' }"
        ></diV>
      </template>
      <template slot="footer">
        <span>订单退货率 </span>
        <span class="emphasis">7.86%</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import CommonCard from '@/components/CommonCard/Index.vue'
export default {
  components: {
    CommonCard
  },
  mounted() {
    const chartsDom = document.getElementById('today-users-chart')
    const charts = this.$echarts.init(chartsDom)
    charts.setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        show: false,
        data: [
          '00:00',
          '01:00',
          '02:00',
          '03:00',
          '04:00',
          '05:00',
          '06:00',
          '07:00',
          '08:00',
          '09:00',
          '10:00',
          '11:00',
          '12:00',
          '13:00'
        ]
      },
      yAxis: {
        show: false
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      series: [
        {
          type: 'bar',
          data: [
            410, 82, 200, 334, 390, 330, 220, 150, 82, 200, 134, 290, 330, 150
          ],
          barWidth: '60%'
        }
      ],
      grid: {
        top: 0,
        bottom: 0,
        right: '10px',
        left: '10px'
      }
    })
  }
}
</script>

<style lang="scss" scoped>
</style>
